<template>
  <div>
    <div class="setPage">
      <div class="setPage__line" style="border-bottom: 1px solid #f0f0f0">
        <div class="setPage__line--title">回收返券</div>
        <div>
          <el-radio-group v-model="form.radio" @change="changeredio">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="setPage__line" v-if="form.radio === 1">
        <div class="setPage__line--title">商品详情入口</div>
        <el-radio-group v-model="form.radio2">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="2">关闭</el-radio>
        </el-radio-group>
      </div>

      <div v-if="form.radio2 === 1 && form.radio === 1" class="goodEnter">
        <div class="goodEnter__poster">
          <img src="../../../../../src/assets/images/shopCar.png" alt />
        </div>
        <div class="goodEnter__type">
          <div class="goodEnter__type--title">按钮名称</div>
          <div class="goodEnter__type--input">
            <div class="content">
              <el-input v-model="form.btnStyles[0].btnName" style="width: 100px" maxlength="4"></el-input>
              <el-color-picker v-model="form.btnStyles[0].color" style="margin-left: 15px"></el-color-picker>
              <div class="tip">4字以内</div>
            </div>
            <div class="content">
              <el-input v-model="form.btnStyles[1].btnName" style="width: 100px" maxlength="5" disabled></el-input>
              <el-color-picker v-model="form.btnStyles[1].color" style="margin-left: 15px"></el-color-picker>
              <!-- <div class="tip">5字以内</div> -->
            </div>
            <div class="content">
              <el-input v-model="form.btnStyles[2].btnName" style="width: 100px" maxlength="4" disabled></el-input>
              <el-color-picker v-model="form.btnStyles[2].color" style="margin-left: 15px"></el-color-picker>
              <!-- <div class="tip">4字以内</div> -->
            </div>
          </div>
        </div>
      </div>

      <div class="setPage__line" v-if="form.radio === 1">
        <div class="setPage__line--title">启用优惠券</div>
        <div class="setPage__line--con">
          <el-select v-model="form.selectType">
            <el-option v-for="item in activeTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>

          <div class="gotoBtn" @click="gotoCoupon">前往设置优惠券</div>
        </div>
      </div>

      <div class="setPage__line newSet" v-if="form.radio === 1">
        <div class="setPage__line--title">页面轮播图</div>
        <draggable v-model="form.productImgList" style="margin-left: 10px; display: flex; flex-wrap: wrap">
          <div v-for="(item, index) in form.productImgList" :key="index" style="position: relative; margin-right: 10px"
            draggable="true">
            <el-upload class="uploaderImg" :auto-upload="false" :on-change="uploadProductImg" action
              :show-file-list="false">
              <img v-if="item.img" :src="item.img" @click="productImgIndex = index" />
            </el-upload>
            <i class="el-icon-circle-close iconCloseStyle" v-if="item.img" @click="cancelImg(item, index)"></i>
          </div>
        </draggable>
      </div>
      <div class="setPage__line--tip" style="margin-left: 110px; margin-top: 20px" v-if="form.radio === 1">
        <el-upload class="iconStyle" :auto-upload="false" :on-change="addUploadProductImg" action
          :show-file-list="false" v-if="form.productImgList.length < 16">
          <i class="el-icon-plus"></i>
        </el-upload>
        <div>建议尺寸：690 * 300px</div>
      </div>

      <div class="setPage__line" style="margin-top: 20px" v-if="form.radio === 1">
        <div class="setPage__line--title">活动说明</div>
        <el-input class="setPage__line--putBox" type="textarea" :rows="5" v-model="form.inputContent"></el-input>
      </div>

      <div class="setPage__line" style="margin-top: 100px" v-if="form.radio === 1">
        <div class="setPage__line--title">提交按钮</div>
        <div class="setPage__line--tip">
          <el-upload class="uploadClass" :auto-upload="false" :on-change="uploadBtnImg" action :show-file-list="false">
            <img v-if="form.btnImg" :src="form.btnImg" />
            <i class="el-icon-plus" v-else></i>
          </el-upload>
          <div>建议尺寸：750 * 98px</div>
        </div>
      </div>

      <div style="width: 88px; margin: 60px 10px 10px 10px">
        <div class="pageBotton" @click="saveClick">保存</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component
} from "vue-property-decorator";
import {
  upLoad
} from "@/api/index";
import draggable from "vuedraggable";
import {
  saveRecoverySet,
  getRecoveryCoupon
} from "@/api/recovery/recovery";

  @Component({
    components: {
      draggable,
    },
  })
export default class ManageIndex extends Vue {
    name = "settingIndex";

    form = {
      id: null,
      radio: 1,
      radio2: 1,
      btnStyles: [{
        btnName: "旧衣回收",
        color: "#409EFF",
        sort: 1,
      },
      {
        btnName: "加入购物车",
        color: "#869926",
        sort: 2,
      },
      {
        btnName: "立即购买",
        color: "#C62D65",
        sort: 3,
      },
      ],
      productImgList: [],
      selectType: null,
      inputContent: "1、一次性最多上传3张图片。 2、每上传一张图片可获得一张超值优惠券。 3、优惠券可在平台商品通用。",
      btnImg: "",
    };

    /** 上传图片下标 */
    productImgIndex = 0;

    activeTypeList = [{
      id: 1,
      label: "旧衣回收专用券",
    }, ];

    mounted() {
      this.init();
    }

    /**
     * 提交按钮上传
     */
    async uploadBtnImg(file) {
      try {
        this.form.btnImg = await this.upLoadFile(file);
        this.$store.dispatch("global/getShopInfo");
      } catch (error) {
        console.log(error);
      }
    }

    async upLoadFile(file) {
      try {
        const whiteList = ["image/jpeg", "image/jpg", "image/png", "image/gif"];
        const isLt2M = file.size < 2 * 1024 * 1024;
        if (!whiteList.includes(file.raw.type)) {
          this.$message.error("上传文件只能是 GIF、JPG或PNG 格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传文件大小不能超过 2MB!");
          return;
        }
        const res = await upLoad({
          file: file.raw,
        });
        return res.data;
      } catch (error) {
        console.log(error);
      }
    }

    /**
     * @method uploadProductImg
     * @description 修改商品主图
     */
    async uploadProductImg(file) {
      const whiteList = ["image/jpeg", "image/jpg", "image/png"];

      const isLt1M = file.size < 1 * 1024 * 1024;
      if (!whiteList.includes(file.raw.type)) {
        this.$message.error("上传文件只能是 JPG或PNG 格式!");
        return;
      }
      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 1MB!");
        return;
      }

      const res = await upLoad({
        file: file.raw,
      });
      this.form.productImgList[this.productImgIndex].img = res.data;
    }

    /**
     * 上传图片
     */
    async addUploadProductImg(file) {
      const whiteList = ["image/jpeg", "image/jpg", "image/png"];

      const isLt1M = file.size < 1 * 1024 * 1024;
      if (!whiteList.includes(file.raw.type)) {
        this.$message.error("上传文件只能是 JPG或PNG 格式!");
        return;
      }
      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 1MB!");
        return;
      }

      const res = await upLoad({
        file: file.raw,
      });
      this.form.productImgList.push({
        img: res.data,
      });
    }

    /**
     * 删除以选中图片
     */
    cancelImg(item, index) {
      this.form.productImgList.splice(index, 1);
    }

    gotoCoupon() {
      this.$router.push({
        name: "CouponIndex"
      });
    }

    /**
     * 初始化信息
     */
    async init() {
      await this.$store.dispatch("global/getShopInfo")
      this.getCouponList();
    }

    /**
     * 获取关联优惠券
     */
    getCouponList() {
      const shopRecInfo = this.$store.state.global.recover;
      const list = shopRecInfo.pageCarousels ?
        shopRecInfo.pageCarousels.split(",") :
        [];
      this.form.id = shopRecInfo.id;
      this.form.radio = shopRecInfo.recyclingState ? 1 : 2;
      this.form.radio2 = shopRecInfo.entranceState ? 1 : 2;
      this.form.btnStyles = shopRecInfo.btnStyles ? shopRecInfo.btnStyles : this.form.btnStyles;
      this.form.productImgList = [];
      list.forEach((item) => {
        this.form.productImgList.push({
          img: item,
        });
      });
      getRecoveryCoupon({}).then((res) => {
        this.activeTypeList = res.data;
      });
      this.form.selectType = shopRecInfo.assCouponId
      // this.form.selectType = shopRecInfo.assCouponId;
      this.form.inputContent = shopRecInfo.activityDesc;
      this.form.btnImg = shopRecInfo.submitImg;
    }

    /**
     * 提交保存
     */
    saveClick() {
      let list = [];
      this.form.productImgList.forEach((item) => {
        list.push(item.img);
      });
      let assCouponId = null;
      let chooseList = [];
      chooseList = this.activeTypeList.filter((item: any) => {
        if (item.id === this.form.selectType) {
          return item.id;
        }
      });
      assCouponId = this.form.selectType ? this.form.selectType : "";
      if (assCouponId === "" && this.form.radio === 1) {
        this.$message.error("请选择优惠券");
        return;
      }
      const btnStyles = this.form.btnStyles;
      for (let i in btnStyles) {
        if (!btnStyles[i].btnName) {
          this.form.btnStyles = [{
            btnName: "旧衣回收",
            color: "#409EFF",
            sort: 1,
          },
          {
            btnName: "加入购物车",
            color: "#869926",
            sort: 2,
          },
          {
            btnName: "立即购买",
            color: "#C62D65",
            sort: 3,
          },
          ];
        }
      }

      const param = {
        recyclingState: this.form.radio === 1 ? true : false,
        entranceState: this.form.radio2 === 1 ? true : false,
        btnStyles: this.form.btnStyles,
        pageCarousels: list.join(","),
        activityDesc: this.form.inputContent,
        submitImg: this.form.btnImg,
        id: this.form.id,
        assCouponId,
      };

      saveRecoverySet(param)
        .then((res) => {
          console.log(res);
          this.$message.success("保存成功");
        })
        .catch((err) => {
          this.$message.error(err || "网络错误");
        });
    }

    changeredio(e) {
      if (e === 2) {
        this.form.radio2 = 2;
      }
    }
}
</script>

<style lang="scss" scoped>
  @include b(setPage) {
    @include e(line) {
      display: flex;
      padding-left: 10px;
      height: 60px;
      align-items: center;

      @include m(title) {
        width: 100px;
        font-size: 14px;
        font-weight: bold;
        color: #586884;
      }

      @include m(putBox) {
        width: 400px;
        margin-top: 90px;
      }

      @include m(con) {
        display: flex;
        align-items: center;

        p {
          margin-right: 20px;
          color: #586884;
        }
      }

      @include m(upload) {
        width: 220px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border: 1px dashed #c3c3c3;
      }

      @include m(tip) {
        display: flex;
        align-items: center;

        .uploadClass {
          border: 1px dashed #c3c3c3;
          width: 100px;
          height: 60px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20px;
        }

        img {
          width: 100px;
          height: 60px;
          padding: 5px;
          border-radius: 10px;
        }

        i {
          color: #7f7f7f;
          font-size: 13px;
        }

        div {
          color: #cfcfcf;
          font-size: 14px;
        }
      }
    }
  }

  @include b(goodEnter) {
    margin: 10px 0px 20px 110px;

    @include e(poster) {
      border: 1px dashed #e5e5e5;
      width: 280px;
      height: 140px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 270px;
        height: 130px;
      }
    }

    @include e(type) {
      display: flex;
      margin-top: 30px;
      align-items: center;

      @include m(title) {
        font-size: 14px;
        font-weight: bold;
        color: #586884;
        margin-right: 40px;
      }

      @include m(input) {
        display: flex;

        .content {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20px;
        }

        .tip {
          font-size: 14px;
          color: #cfcfcf;
          margin-left: 15px;
        }
      }
    }
  }

  .imgList {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
  }

  .iconCloseStyle {
    position: absolute;
    right: 8px;
    top: -5px;
    font-size: 18px;
    cursor: pointer;
    color: #c3c3c3;
  }

  .iconStyle {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #c3c3c3;
    margin-right: 10px;
  }

  .uploaderImg {
    width: 130px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #c3c3c3;
    margin-right: 20px;

    img {
      width: 120px;
      height: 90px;
    }
  }

  .newSet {
    margin-top: 30px;
    display: flex;
    border: none;
    height: 100%;
    align-items: flex-start;
  }

  .popTip {
    border: none;
    margin-top: 30px;
  }

  .setTip {
    display: flex;
    flex-wrap: wrap;
    height: 60px;

    &__tipTwo {
      color: #ff3b4b;
      font-size: 14px;
      margin-left: 40px;
    }
  }

  .gotoBtn {
    margin-left: 40px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: bold;
    margin-right: 20px;
    cursor: pointer;
    background-color: #2e99f3;
    color: white;
  }

  .pageBotton {
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: bold;
    margin-right: 20px;
    cursor: pointer;
    background-color: #2e99f3;
    color: white;
  }
</style>